<template>
	<div class="personal">
		<a-layout>
			<a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
				<div class="logo">
					<heart-outlined />
				</div>
				<a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
					<template v-for="item in personalChildren" :key="item.path">
						<a-sub-menu v-if="item.children">
							<template #title>
								<span @click="toRouterPush(item.name)">
									<UnorderedListOutlined />
									<span>{{ item.meta.name }}</span>
								</span>
							</template>
							<template v-for="childrenItem in item.children" :key="childrenItem.path">
								<a-menu-item @click="toRouterPush(childrenItem.name)">{{childrenItem.meta.name}}
								</a-menu-item>
							</template>
						</a-sub-menu>
						<a-menu-item v-else @click="toRouterPush(item.name)" :key="item.path">
							<SettingOutlined />
							<span>{{ item.meta.name }}</span>
						</a-menu-item>
					</template>
				</a-menu>
			</a-layout-sider>
			<a-layout>
				<a-layout-header style="background: #fff; padding: 0">
					<menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
					<menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
					<a-breadcrumb style="display: inline-block;margin-left: 20px;">
						<a-breadcrumb-item>
							<router-link to="/">Home</router-link>
						</a-breadcrumb-item>
						<a-breadcrumb-item v-for="(item,index) in $route.matched" :key="index">
							<router-link :to="{name:item.name}">{{item.name}}</router-link>
						</a-breadcrumb-item>
					</a-breadcrumb>
				</a-layout-header>
				<a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }">
					<router-view></router-view>
				</a-layout-content>
			</a-layout>
		</a-layout>
	</div>
</template>

<script>
	import {
		SettingOutlined,
		UnorderedListOutlined,
		HeartOutlined,
		MenuUnfoldOutlined,
		MenuFoldOutlined,
	} from '@ant-design/icons-vue';
	import personalChildren from '../router/personal.js'

	export default {
		name: 'Personal',
		data() {
			return {
				selectedKeys: ['1'],
				collapsed: false
			}
		},
		methods: {
			toRouterPush(param) {
				if (typeof param === 'string') {
					this.$router.push({
						name: param
					})
				}
				if (typeof param === 'object') {
					this.$router.push(param)
				}
			}
		},
		components: {
			SettingOutlined,
			UnorderedListOutlined,
			HeartOutlined,
			MenuUnfoldOutlined,
			MenuFoldOutlined,
		},
		computed: {
			isLogin() {
				// return this.$store.state.login.isLogin;
				return this.$cookies.get('isLogin');
			},
			personalChildren() {
				return personalChildren.filter((item) => item.meta.isLeft)
			}
		},
		beforeRouteEnter(to, from, next) {
			next((vm) => {
				if (!vm.isLogin) {
					vm.$router.push('/login')
				}
			})
		},
		created() {
			
		},
		mounted() {
			
		}
	}
</script>

<style lang="scss">
	.ant-layout-has-sider {
		height: 100vh;

		.logo {
			width: 80%;
			height: 40px;
			background-color: #2c3e50;
			margin: 10px auto;
			color: #fff;
			text-align: center;
			line-height: 40px;
			font-size: 30px;
		}
	}

	.ant-layout-header {
		.anticon.trigger {
			margin-left: 15px;
		}
	}
</style>
